<template>
  <div class="club-details-container">
    <!-- 社团信息展示区 -->
    <el-card class="club-info-card" shadow="hover">
      <h1 class="club-name">{{ clubDetails?.clubName }}</h1>
      <div class="info">
        <el-icon><User /></el-icon>
        <span>人数: {{ clubDetails?.memberCount }}</span>
      </div>
      <div class="tags">
        <el-tag v-for="tag in clubDetails?.tags" :key="tag" type="success">
          {{ getTagText(tag) }}
        </el-tag>
      </div>
      <p class="description">{{ clubDetails?.introduction }}</p>
    </el-card>
    <!--菜单-->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="详情" name="first" ></el-tab-pane>
      <el-tab-pane label="成员" name="second" :disabled="!isMember"></el-tab-pane>
      <el-tab-pane label="活动" name="third" :disabled="!isMember"></el-tab-pane>
      <el-tab-pane label="公告" name="fourth" :disabled="!isMember"></el-tab-pane>
    </el-tabs>
    <RouterView />
  </div>
</template>

<script lang="ts" setup>
import {ElMessage, type TabsPaneContext} from "element-plus";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { User } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import {ClubControllerService, type ClubMemberQueryRequest} from "../../../../generated";
import {useUserStore} from "../../../stores/user.ts";
import USER_ROLE_ENUM from "../../../access/userRoleEnum.ts";
const router = useRouter();

const route = useRoute();

interface Club {
  id: number;
  clubName: string;
  userVO: {
    userName: string;
    userAccount: string;
    phoneNumber: string | null;
    major: string | null;
    grade: string | null;
  };
  tags: string[];
  introduction: string;
  memberCount: number;
  clubAnnouncementVo: {
    title: string;
    content: string;
    createTime: string;
    isDelete: string;
  };
}

const isMember = ref(false);
const clubId = Number(route.query.clubId);
const userStore = useUserStore();
const clubDetails = ref<Club | null>(null);

const loadClubDetails = async (clubId: number) => {
  try {
    const response = await ClubControllerService.getClubVoById(clubId);
    if (response.code === 0 && response.data) {
      clubDetails.value = response.data; // 存储社团详情数据
    } else {
      clubDetails.value = null; // 如果数据为空或格式不正确，设置为 null
      console.error(
          "加载社团详情失败:",
          response.message || "返回数据格式错误"
      );
    }
  } catch (error) {
    clubDetails.value = null; // 如果接口调用失败，设置为 null
    console.error("加载社团详情时发生错误:", error.message || error);
  }
};

const checkMembershipStatus = async () => {
  if (userStore.userRole === USER_ROLE_ENUM.ADMIN){
    isMember.value = true;
    return;
  }

  try {
    const response = await ClubControllerService.isMemberOfClub({
      clubId: clubId,
      userId: userStore.id,
    } as ClubMemberQueryRequest);

    if (response.code === 0) {
      isMember.value = response.data;
    } else {
      ElMessage.error("无法检查身份状态");
    }
  } catch (error) {
    console.error("检查会员状态时发生错误:", error);
    ElMessage.error("无法检查身份状态");
  }
};

onMounted(async () => {
  await loadClubDetails(clubId);
  await checkMembershipStatus();
});
const tagFilters = [
  { text: "学术类", value: "academic" },
  { text: "艺术类", value: "art" },
  { text: "体育类", value: "sports" },
  { text: "公益类", value: "volunteer" },
  { text: "文化类", value: "culture" },
  { text: "娱乐类", value: "recreation" },
  { text: "职业发展类", value: "career" },
  { text: "其他类", value: "other" },
];

const getTagText = (tag: string) => {
  const filter = tagFilters.find((item) => item.value === tag);
  return filter ? filter.text : tag;
};

const activeName = ref("first"); // 初始值与第一个 tab 的 name 属性一致

const handleClick = (tab: TabsPaneContext) => {
  const clubId = route.query.clubId;
  if (!tab.paneName) {
    console.error("未知选项:", tab.paneName);
    return;
  }
  switch (tab.paneName) {
    case "first":
      router.push({ path: `/club/details`, query: { clubId } });
      break;
    case "second":
      router.push({ path: `/club/members`, query: { clubId } });
      break;
    case "third":
      router.push({ path: `/club/activities`, query: { clubId } });
      break;
    case "fourth":
      router.push({ path: `/club/announcements`, query: { clubId } });
      break;
    default:
      console.error("未知选项:", tab.paneName);
  }
};
</script>

<style>
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 50px;
  font-weight: 600;
}
.demo-tabs {
  margin-bottom: 10px; /* 减少间距 */
}

.club-details-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.club-info-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  flex: 1;
  position: relative;
}

.club-name {
  font-size: 24px;
  font-weight: bold;
  color: #5c6bc0;
  margin-bottom: 10px;
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  color: #3f51b5;
}

.tags {
  margin: 10px 0;
}

.description {
  margin: 10px 0;
  color: #3f51b5;
}
</style>
